<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeName" accordion>
      <!-- 使用 index 来显示顺序编号 -->
      <el-collapse-item v-for="(post, index) in posts" :key="index + 1" :name="index + 1">
        <template #title>
          <div class="post-title">
            <!-- 顺序编号和图片 -->
            <div class="title-left">
              {{ index + 1 }}
              <img :src="post.imagePath" alt="图片" class="title-image" />
            </div>

            <!-- 右侧操作按钮 -->
            <div class="title-right">
              <el-tag :type="getTagType(post.state)" class="state-tag">{{ post.state }}</el-tag>

              <!-- 点赞、浏览、分享、收藏、评论 -->
              <div class="post-stats">
                <span class="stat-item"> <span class="stat-item">👍 {{ post.likes }}</span>{{ post.likes }}</span>
                <span class="stat-item"><el-icon><View /></el-icon> {{ post.views }}</span>
                <span class="stat-item"><el-icon><Share /></el-icon> {{ post.shares }}</span>
                <span class="stat-item"><el-icon><Star /></el-icon> {{ post.favorites }}</span>
                <span class="stat-item"><el-icon><Message /></el-icon> {{ post.comments }}</span>
              </div>

              <!-- 操作按钮 -->
              <el-icon class="header-icon no-margin"><info-filled /></el-icon>

              <!-- 编辑按钮 -->
              <el-button type="text" @click.stop="editPost(post.id)">
                <el-icon><Edit /></el-icon>
              </el-button>
              <!-- 分享按钮 -->
              <el-button type="text" @click.stop="sharePost(post.id)">
                <el-icon><Share /></el-icon>
              </el-button>
              <!-- 删除按钮 -->
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确定要删除此项吗?"
                @confirm="confirmDelete(post.id)"
                @cancel="cancelDelete"
              >
                <template #reference>
                  <el-button type="text" @click.stop>
                    <el-icon><Delete /></el-icon> <!-- 删除图标 -->
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </template>

        <!-- 显示帖子和游记的详细信息 -->
        <el-descriptions title="帖子内容" :column="2" border>
          <el-descriptions-item label="标题">{{ post.title }}</el-descriptions-item>
          <el-descriptions-item label="作者">{{ post.author }}</el-descriptions-item>
          <el-descriptions-item label="发布日期">{{ formatDate(post.publishDate) }}</el-descriptions-item>
          

          <!-- 直接展示图片 -->
          <el-descriptions-item label="图片">
            <img :src="post.imagePath" alt="图片" style="max-width: 100px;">
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatDate(post.updateTime) }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ post.state }}</el-descriptions-item>
         
          <el-descriptions-item label="内容">{{ post.content }}</el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { InfoFilled, Edit, Delete, ThumbUp, ThumbUpFilled, View, Share, Star, Message } from '@element-plus/icons-vue';
import { } from '@element-plus/icons-vue';

export default {
  name: "PostView",
  setup() {
    const router = useRouter();

    const posts = ref([
      {
        id: 1,
        title: '游记：春游南山',
        author: '小明',
        publishDate: '2025-03-01T10:00:00',
        content: '这是一次难忘的春游，景色美不胜收...',
        imagePath: '/favicon.ico',
        state: '已审核',
        likes: 120,
        views: 1500,
        shares: 75,
        favorites: 200,
        comments: 35,
        updateTime: '2025-03-03T12:30:00',
      },
      {
        id: 2,
        title: '帖子：海边度假',
        author: '小红',
        publishDate: '2025-03-02T11:15:00',
        content: '海风拂面，白沙滩上的脚印还未被海浪抹去...',
        imagePath: '/favicon.ico',
        state: '待审核',
        likes: 80,
        views: 1200,
        shares: 50,
        favorites: 100,
        comments: 10,
        updateTime: '2025-03-04T09:20:00',
      },
      {
        id: 3,
        title: '游记：秋游北京',
        author: '小李',
        publishDate: '2025-03-03T12:00:00',
        content: '秋天的北京充满了浓浓的历史氛围...',
        imagePath: '/favicon.ico',
        state: '已拒绝',
        likes: 200,
        views: 3000,
        shares: 150,
        favorites: 250,
        comments: 50,
        updateTime: '2025-03-05T14:40:00',
      },
    ]);

    const getTagType = (state) => {
      if (state === '已审核') {
        return 'success'; // 绿色
      } else if (state === '已拒绝') {
        return 'danger'; // 红色
      } else {
        return 'primary'; // 默认颜色
      }
    };

    // 格式化日期方法
    const formatDate = (dateStr) => {
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    // 分享帖子
    const sharePost = (id) => {
      console.log('分享帖子 ID:', id);
      // 实现分享功能
    };

    // 编辑帖子
    const editPost = (id) => {
      console.log('编辑帖子 ID:', id);
      router.push(`/edit/${id}`);
    };

    // 确认删除
    const confirmDelete = (id) => {
      console.log('确认删除帖子 ID:', id);
      // 这里可以调用删除接口进行处理
    };

    // 取消删除
    const cancelDelete = () => {
      console.log('取消删除操作');
    };

    return {
      posts,
      getTagType,
      formatDate,
      sharePost,
      editPost,
      confirmDelete,
      cancelDelete,
    };
  },
};
</script>

<style scoped>
.post-title {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 使内容分布在两端 */
  width: 100%;
  padding: 0;
  margin: 0;
}

.title-left {
  display: flex;
  align-items: center;
  gap: 8px; /* 顺序编号和图片之间的间距 */
}

.title-image {
  max-width: 120px; /* 控制图片大小 */
  height: auto;
}

.title-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px; /* 控制右侧操作按钮间距 */
}

.state-tag {
  margin-left: 10px;
}

.post-stats {
  display: flex;
  align-items: center;
  gap: 8px; /* 减小图标之间的间距 */
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 14px; /* 调整字体大小 */
}

.header-icon {
  margin-left: 0px;
  padding: 0;
}

.el-button {
  padding: 0;
  margin-left: 10px;
  vertical-align: middle;
}

.el-descriptions__label {
  font-weight: bold;
  color: #409EFF;
}

.el-descriptions__item {
  padding: 8px 0;
}

.el-descriptions-item img {
  max-width: 100px;
}
</style>
